---
import "../styles/global.css";
import BaseLayout from "../layouts/BaseLayout.astro";
const pageTitle = "关于我";
const identity = {
    firstName: "莎拉",
    country: "加拿大",
    occupation: "技术撰稿人",
    hobbies: ["摄影", "观鸟", "棒球"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];

const happy = true;
const finished = false;
const goal = 3;
const skillColor = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---

<style define:vars={{ skillColor, fontWeight, textCase }}>
    h1 {
        color: purple;
        font-size: 4rem;
    }
    .skill {
        color: var(--skillColor);
        font-weight: var(--fontWeight);
        text-transform: var(--textCase);
    }
</style>
<BaseLayout pageTitle={pageTitle}>
    <h2>……和我的新 Astro 网站！</h2>

    <p>
        我正在学习 Astro
        的入门教程。这是我网站上的第二个页面，也是我自己建立的第一页面！
    </p>

    <p>
        随着我完成更多教程，该站点将更新，所以请继续查看我的旅程将如何进行吧！
    </p>
    <p>以下是关于我的几个事实：</p>
    <ul>
        <li>我的名字是{identity.firstName}.</li>
        <li>我住在{identity.country}。我的职业是{identity.occupation}。</li>
        {
            identity.hobbies.length >= 2 && (
                <li>
                    我的两个习惯：{identity.hobbies[0]}和{identity.hobbies[1]}
                </li>
            )
        }
    </ul>
    <p>我的技能是：</p>
    <ul>
        {skills.map((skill) => <li class="skill">{skill}</li>)}
        <br />
        {skills.map((skill) => <li>{skill.toLocaleLowerCase()}</li>)}
    </ul>

    {happy && <p>我非常乐意学习 Astro！{happy}</p>}

    {finished && <p>我完成了这节教程！</p>}

    {goal === 3 ? <p>我的目标是在三天内完成。</p> : <p>我的目标不是 3 天。</p>}
</BaseLayout>
